<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-04-04 15:12:27"
-->
<template>
    <v-select
      :loading="loading"
      :disabled="loading"
      :items="items"
      :value="value"
      @input="inputHandle"
      :multiple="multiple"
      :return-object="returnObject"
      v-bind="$attrs"
      item-text="title"
      item-value="id"
    >
      <template v-slot:prepend-item>
        <v-text-field label="输入标题关键字" solo hide-details flat v-model="title" @input="fetchData"></v-text-field>
        <v-divider class="mt-2"></v-divider>
      </template>
      <template v-slot:append-outer>
        <slot></slot>
      </template>
    </v-select>
</template>
<script>
import { fetchList } from '@/api/admin/pages.js'
export default {
  name: 'PagesSelect',
  props: {
    value: [Number, Array, Object],
    returnObject: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data: function () {
    return {
      loading: false,
      items: [],
      title: ''
    }
  },
  computed: {},
  created: function () {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      fetchList({
        sort: 'id',
        descending: 'true',
        page: 1,
        page_size: 10,
        search: { title: this.title }
        // trashed: false
      }).then(res => {
        this.items = res.data.data
      }).finally(() => {
        this.loading = false
      })
    },
    inputHandle(val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style scoped>
</style>
